<template>
  <div class="classify-detail van-hairline">
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      {{ classify.name }}
    </van-divider>
    <van-empty
      v-if="goodList.length === 0"
      image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
      image-size="120"
      description="暂无商品"
    />
    <van-grid v-else :column-num="2" gutter="8" :clickable="true">
      <van-grid-item
        v-for="item in goodList"
        :key="item.id"
        :to="'/detail/' + item.id"
        class="item"
      >
        <img :src="item.s_goods_photos[0].path" class="good-img" />
        <h3>{{ item.name }}</h3>
        <p>{{ item.desc }}</p>
        <p>{{ item.price }}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup>
import { toRefs, ref } from 'vue';
import { getGoodsByClassifyIdApi } from '@/service';
const props = defineProps(['classify']);
const { classify } = toRefs(props);
const goodList = ref([]);
const getGoodsByClassifyId = async () => {
  const res = await getGoodsByClassifyIdApi(classify.value.id);
  goodList.value = res.result;
};
getGoodsByClassifyId();
</script>

<style lang="scss" scoped>
.classify-detail {
  display: flex;
  flex-direction: column;
  // gap: 10px;
  height: calc(100vh - 40px - 50px);
  .item {
    .good-img {
      width: 30vw;
    }
  }
}
</style>
